<template>
	<view class="recharge">
		<uni-nav-bar
		  title="充值套餐"
		  color="#fff"
		  leftIcon="left"
		  backgroundColor="#F0DBB0;"
		  :border="false"
		  :statusBar="true"
		  :fixed="true"
		  titleClass="custom-title"
		>
		  <template v-slot:left>
		    <view @click="$common.back()">
		      <image
		        src="/static/images/back.png"
		        style="width: 32rpx; height: 32rpx"
		        mode="scaleToFill"
		      />
		    </view>
		  </template>
		</uni-nav-bar>
		<view class="content-box">
			<view class="title">选择套餐</view>
			<view class="grid-container">
				<view class="grid-item" v-for="index in 9" :key="index">
					<view :class="activeIndex == index ? 'item-a' : 'item'" @click="chooseEvent(index)">
						<view class="num"><text>100</text>个</view>
						<view class="price">售价：￥180</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex: 0,
			}
		},
		methods: {
			chooseEvent(value) {
				this.activeIndex = value;
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 定义自定义标题样式 */
	.uni-nav-bar-text {
	  span {
	    font-weight: bold !important; /* 加粗 */
	    color: white !important; /* 白色文字 */
	    text-shadow: 0 0 1px #000, /* 基础描边 */ 0 0 1px #000, 0 0 1px #000,
	      -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	  }
	}
	.recharge {
		width: 100%;
		height: 100vh;
		background-color: #F0DBB0;
		display: flex;
		flex-direction: column;
		align-items: center;
		.content-box {
			margin-top: 100rpx;
			width: 686rpx;
			padding: 30rpx;
			background: #FFF2D8;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			.title {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
			}
			.grid-container {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				.grid-item {
					margin-top: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.item {
					width: 184rpx;
					height: 183rpx;
					background: transparent;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					border: 4rpx solid #1D1D1D;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-family: Source Han Sans CN, Source Han Sans CN;
					color: #000000;
					.num {
						font-size: 26rpx;
						text {
							font-size: 48rpx;
						}
					}
					.price {
						margin-top: 10rpx;
						font-size: 24rpx;
					}
				}
				.item-a {
					width: 184rpx;
					height: 183rpx;
					background: #F36058;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					border: 4rpx solid #1D1D1D;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-family: Source Han Sans CN, Source Han Sans CN;
					color: #ffffff;
					.num {
						font-size: 26rpx;
						text {
							font-size: 48rpx;
						}
					}
					.price {
						margin-top: 10rpx;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>